<html>
  <body>
    <!-- 通过下面的 rerender 函数动态生成内容 -->
    <script>
      const vnode = {
        tag: "div",
        props: {
          onclick: () => alert("hello"),
        },
        children: "click me",
      };

      function rerender(vnode, container) {
        const el = document.createElement(vnode.tag);
        for (const key in vnode.props) {
          // 如果以 on 开头，说明它是事件
          if (/^on/.test(key)) {
            el.addEventListener(
              // 事件名从 onClick -> click
              key.substring(2).toLocaleLowerCase(),
              vnode.props[key]
            );
          }
        }
        if (typeof vnode.children === "string") {
          el.appendChild(document.createTextNode(vnode.children));
        } else if (Array.isArray(vnode.children)) {
          vnode.children.forEach((child) => rerender(child, el));
        }

        container.appendChild(el);
      }

      rerender(vnode, document.body);
    </script>
  </body>
</html>
